<template>
  <div class="comp-container">
    <a-form
      :model="attrs.modelForm"
      :rules="attrs.rules"
      :ref="attrs.formRef"
      layout="vertical"
    >
      <a-form-item
        class="chiose-type"
        label="选择组件类型"
        field="type"
        required
        label-col-flex="0px"
      >
        <CompType v-bind="{ ...attrs, ...props }" />
      </a-form-item>
      <CompText
        v-if="attrs.modelForm.type === 'text'"
        v-bind="{ ...attrs, ...props }"
        :handleChange="handleChange"
        :handleChildChange="handleChildChange"
      />
      <CompSelect
        v-if="attrs.modelForm.type === 'select'"
        v-bind="{ ...attrs, ...props }"
        :handleChange="handleChange"
        :handleChildChange="handleChildChange"
      />
      <CompRadio
        v-if="attrs.modelForm.type === 'radiobox'"
        v-bind="{ ...attrs, ...props }"
        :handleChange="handleChange"
        :handleChildChange="handleChildChange"
      />
      <CompCheckBox
        v-if="attrs.modelForm.type === 'checkbox'"
        v-bind="{ ...attrs, ...props }"
        :handleChange="handleChange"
        :handleChildChange="handleChildChange"
      />
      <CompChildSelect
        v-if="attrs.modelForm.type === 'child_select'"
        v-bind="{ ...attrs, ...props }"
        :handleChange="handleChange"
        :handleChildChange="handleChildChange"
        :handleSecondChildChange="handleSecondChildChange"
      />
    </a-form>
  </div>
</template>
<script lang="ts" setup name="CompModal">
import { useAttrs, ref, onMounted, type Ref } from "vue";
import CompType from "./CompType.vue";
import CompText from "./CompText.vue";
import CompSelect from "./CompSelect.vue";
import CompRadio from "./CompRadio.vue";
import CompCheckBox from "./CompCheckBox.vue";
import CompChildSelect from "./CompChildSelect.vue";
import * as Api from '@/api/configCenter/configCenter';
import * as ApiType from "@/api/configCenter/configCenter.d";
import type { FieldRule, ButtonProps } from "@arco-design/web-vue";
interface Prop {
  handleCompAdd: Function;
  handleCompDel: Function;
  handleCompChildDel: Function;
  handleCompChildAdd: Function;
}
const attrs = useAttrs() as {
  modelForm: any;
  rules: Record<string, FieldRule<any> | FieldRule<any>[]> | undefined;
  formRef: Ref<any>;
  okButtonProps: ButtonProps;
};
const props = defineProps<Prop>();
const list = ref<ApiType.CompDataItem[]>([]);
const getList = async () => {
  const params = {
    page: 1,
    pageSize: 100000
  }
  const res = await Api.getCompData(params);
  if (res.list) {
    list.value = res.list;
  }
}
const handleChange = (value: string, id: number) => {
  if (list.value.some(item => item.name === value && item.id !== id)) {
    attrs.modelForm.ifNameValidated = true
    attrs.formRef.value.setFields({
      name: {
        status: "error",
        message: "组件名称已存在",
      },
    })
  } else if(value === ''){
    attrs.formRef.value.setFields({
      name: {
        status: "error",
        message: "名称不为空",
      },
    })
  }else {
    attrs.formRef.value.setFields({
      name: {
        status: "info",
        message: "",
      },
    })
    attrs.modelForm.ifNameValidated = false
  }
  attrs.okButtonProps.disabled =
      (!!attrs.modelForm.ifNameValidated || !!attrs.modelForm.ifSecondValidated || !!attrs.modelForm.ifChildValidated)
}
const handleChildChange = (value: string, index: number, type: string) => {
  //下拉菜单的下拉选项的效验
  if (attrs.modelForm.data.some((item: { [x: string]: number | string; }, i: number) => item[type] == value && i !== index)) {
    //效验重复
    if (type === "text") {
      attrs.formRef.value.setFields({
        [`data.${index}.text`]: {
          status: "error",
          message: "选项名称已存在",
        },
      })
    }
    if (type === "code") {
      attrs.formRef.value.setFields({
        [`data.${index}.code`]: {
          status: "error",
          message: "编码值已存在",
        },
      })
    }
    attrs.modelForm.ifChildValidated = true
  } else if(value === ''){//效验为空
    if (type === "text") {
      attrs.formRef.value.setFields({
        [`data.${index}.text`]: {
          status: "error",
          message: `选项${index + 1}名称不能为空`,
        },
      })
      attrs.modelForm.ifChildValidated = true
    }
  }else {
    attrs.formRef.value.setFields({
      [`data.${index}.text`]: {
        status: "info",
        message: "",
      },
    })
    attrs.modelForm.ifChildValidated = false
  }
  attrs.okButtonProps.disabled =
      (!!attrs.modelForm.ifNameValidated || !!attrs.modelForm.ifSecondValidated || !!attrs.modelForm.ifChildValidated)
}
const handleSecondChildChange = (value: string, parentIndex: number, index: number, type: string) => {
  if (attrs.modelForm.data[parentIndex].child.some((item: { [x: string]: string; }, i: number) => item[type] == value && index !== i)) {
    if (type === "text") {
      attrs.formRef.value.setFields({
        [`data.${parentIndex}.child.${index}.text`]: {
          status: "error",
          message: "子项选项名称已存在",
        },
      })
    }
    if (type === "code") {
      attrs.formRef.value.setFields({
        [`data.${parentIndex}.child.${index}.code`]: {
          status: "error",
          message: "子项编码值已存在",
        },
      })
    }
    attrs.modelForm.ifSecondValidated = true
  }else if(value === ''){
    attrs.formRef.value.setFields({
      [`data.${parentIndex}.child.${index}.text`]: {
        status: "error",
        message: `二级选项${index + 1}名称不能为空`,
      },
    })
    attrs.modelForm.ifSecondValidated = true;
  } else {
    attrs.formRef.value.setFields({//清除效验
      [`data.${parentIndex}.child.${index}.text`]: {
        status: "info",
        message: "",
      },
    })
    attrs.modelForm.ifSecondValidated = false;
  }
  attrs.okButtonProps.disabled =
      (!!attrs.modelForm.ifNameValidated || !!attrs.modelForm.ifSecondValidated || !!attrs.modelForm.ifChildValidated)
}
onMounted(() => (getList()))
</script>
<style lang="less" scoped>
@import url("../styles/compModal.less");
</style>
